<template>
	<view>
		
		<map id="map" class="map" :scale="3" :longitude="longitude" :latitude="latitude" show-location :markers="marker"
			@markertap="markertap">
		</map>
		<view class="cover-box">
			<view class="shebei">
				设备编号：{{itemDetail.equipmentNo}}
			</view>
			<view class="shebei">
				设备地址：{{itemDetail.address}}
			</view>
			<view class="shebei">
				设备名称：{{itemDetail.alarmsName}}
			</view>
			<view class="shebei">
				<u-button type="primary" size="small" text="控制" @click="control(itemDetail.id)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listToMiniApp,
		getInfo,
		mapListToMiniAppDetail
	} from '../../api/index.js'
	export default {
		data() {
			return {
				isShow: false,
				disable: false,
				show: false,
				title: '',
				itemDetail: {
					equipmentNo: '',
					address: '',
					alarmsName: '',
					id: '',
				},
				address: '',
				longitude: '',
				latitude: '',
				imageSrc: '/static/logo.png', //自定义图片
				marker: [],
				polygons: [],
				// mapKey: '42795f9a59358dea58a8bxxx',//高德地图测试key
				mapKey: '7OUBZ-6WDWB-NF5US-J4EU5-G4X5Q-SWB6T', //腾讯地图测试key
				// mapKey: 'p5mGzPEt30bwv1yEkeQGsGP4Xrs9xxxx', //百度地图
				mapType: 'tmap' // tmap bmap amap
			};
		},
		created() {
			this.getList();
		},
		methods: {
			control(id){
				uni.navigateTo({
					url:'/pageIndex/pages/index/control2?id='+id
				})
			},
			markertap(e) {
				console.log('ee', e);
				mapListToMiniAppDetail(e.markerId).then(res => {
					console.log('res', res);
					this.itemDetail = res.data
					this.show = true
				})
			},
			getList() {
				listToMiniApp().then(res => {
					console.log(res)
					const arr = []
					res.data.forEach(item => {
						if (item.iotAlarmsList) {
							item.iotAlarmsList.forEach(j => {
								arr.push({
									id: j.id,
									title: j.alarmsName,
									width: 40,
									height: 40,
									latitude: parseFloat(j.latitude),
									longitude: parseFloat(j.longitude),
									iconPath: 'https://ew6.cn/address.png'
								})
							})
						}
					})
					setTimeout(() => {
						this.initData(arr);
					}, 100);
				})
			},
			initData(arr) {
				// this.qqmapsdk = new QQMapWX({
				// 	key: this.key
				// });

				uni.getFuzzyLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (data) => {
						console.log('asdadasd', data);
						this.longitude = data.longitude;
						this.latitude = data.latitude;
						this.marker = arr
					}
				});
			},
			onClick() {
				this.show = true;
			},
			confirm(e) {
				if (e) {
					this.longitude = e.longitude;
					this.latitude = e.latitude;
					this.title = e.title;
					this.address = e.address;
				}
				this.show = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cover-box {
		position: absolute;
		bottom: 0;
		background: #fff;
		width: 100%;
		height: 400rpx;
		.shebei{
			padding: 5px 10px;
			white-space: break-spaces;
		}
	}

	.map {
		position: relative;
		width: 100vw;
		height: calc(100vh - 400rpx);

		.position-icon {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 50px;
			height: 40px;
			margin-top: -12px;
			transform: translate(-50%, -50%);
		}
	}
</style>